<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link href="/css/layui.css" rel="stylesheet">
<link href="/css/layui.mobile.css" rel="stylesheet">
<style>
	.layui-table-edit{
		border: 5px solid;
	}
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-content">
					<form class="form-horizontal m-t" id="signupForm">
						<input id="id" name="id" th:value="${reimDto.id}"  type="hidden">
						<div class="form-group">
							<label class="col-sm-2 control-label">报销单号：</label>
							<div class="col-sm-4">
								<input id="reimNumber" name="reimNumber" th:value="${reimDto.reimNumber}" class="form-control" type="text">
							</div>
							<label class="col-sm-2 control-label">报销金额：</label>
							<div class="col-sm-4">
								<input id="reimAmount" name="reimAmount" th:value="${reimDto.reimAmount}" class="form-control" type="text">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">报销日期：</label>
							<div class="col-sm-4">
								<!--<input id="reimDate" name="reimDate" class="form-control" type="text">-->
								<input type="text" class="laydate-icon layer-date form-control" id="reimDate" name="reimDate" th:value="${#dates.format(reimDto.reimDate, 'yyyy-MM-dd')}" placeholder="请选择报销日期"
									   onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" style="background-color: #fff;" readonly="readonly" />
							</div>
							<label class="col-sm-2 control-label">报销金额(大写)：</label>
							<div class="col-sm-4">
								<input id="reimAmountCap" name="reimAmountCap" th:value="${reimDto.reimAmountCap}"
									   class="form-control" type="text" readonly="readonly">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">报销人：</label>
							<div class="col-sm-4">
								<label class="col-sm-2 control-label" th:text="${reimDto.reimUsername}">报销人：</label>
							</div>
							<label class="col-sm-2 control-label">部门：</label>
							<div class="col-sm-4">
								<label class="col-sm-2 control-label" th:text="${reimDto.deptName}">部门：</label>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">部门领导：</label>
							<div class="col-sm-4">
								<label class="col-sm-2 control-label" th:text="${reimDto.depetLeadername}">部门：</label>
							</div>
							<label class="col-sm-2 control-label"></label>
							<div class="col-sm-4"></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">摘要：</label>
							<div class="col-sm-10">
								<textarea id="remark" name="remark" th:text="${reimDto.remark}" class="form-control"></textarea>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-9 col-sm-offset-3">
								<button class="btn btn-primary" lay-submit lay-filter="formDemo">保存</button>
								<button class="btn btn-primary" lay-submit lay-filter="formDemo">提交</button>
							</div>
						</div>
					</form>

					<div class="layui-tab">
						<ul class="layui-tab-title">
							<li class="layui-this">报销明细</li>
						</ul>
						<div class="layui-tab-content">
							<div class="layui-tab-item layui-show">
								<table class="layui-hide" id="demo" lay-filter="test"></table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div th:include="include::footer"></div>
<script script type="text/html" id="projectId">
	<select name="projectId" lay-filter="projectId" class="form-control chosen-select-projectId" lay-search>
			</select>
</script>
<script script type="text/html" id="amountTypeid">
	<select name="amountTypeid" lay-filter="amountTypeid" class="form-control chosen-select-amountTypeid" lay-search>
			</select>
</script>
<script script type="text/html" id="invoiceType">
	<select name="invoiceType" lay-filter="invoiceType" class="form-control chosen-select-invoiceType" lay-search></select>
</script>
<script type="text/javascript" src="/js/layui.all.js"></script>
<script type="text/javascript" src="/js/appjs/fin/reim/edit.js"></script>
<script type="text/javascript" src="/js/plugins/cropper/cropper.min.js"></script>
<script type="text/javascript" src="/js/plugins/layer/laydate/laydate.js" ></script>
<script type="text/javascript" src="/js/plugins/distpicker/distpicker.data.min.js"></script>
<script type="text/javascript" src="/js/plugins/distpicker/distpicker.min.js"></script>
<script  th:inline="javascript">
	var msg = [[${reimDto.reimInfoDOList}]];
</script>
<script>
	console.log(msg,"msg");
	var selectData = {};
	var opentls={
		elem: '#demo',
		cols: [
			[ //标题栏
				{
					type: 'checkbox',
					fixed: 'left'
				},
				{
					hide:true,
					field : 'id',
					title : '主键'
				},
				{
					field: 'index',
					title: 'ID',
					type: 'numbers'
				},
				{
					field: 'projectId',
					title: '项目',
					templet: '#projectId'
				},
				{
					field: 'amountTypeid',
					title: '费用类型',
					templet: '#amountTypeid'
				},
				{
					field: 'reimPrice',
					title: '金额',
					edit: 'text'
				},
				{
					field: 'invoiceType',
					title: '发票类型',
					templet: '#invoiceType'
				},
				{
					field: 'taxRate',
					title: '税率',
					edit: 'text'
				},
				// {
				// 	field: 'notTaxPrice',
				// 	title: '不含税金额',
				// 	edit: 'text'
				// },
				{
					field: 'specRemark',
					title: '特殊说明',
					edit: 'text'
				}, {
				field: 'remark',
				title: '行备注',
				edit: 'text'
			}
			]
		],
		data: [{}],
		limit:9999,
		even: true
	};

	function tableSelect(layui,options){
		/*
            dong---支持开启关闭 select 功能 ----dong
            renderTable(name,open)
            open:false/true
        */
		var that = this
		this.options = options

		this.url = null
		this.eleSelect = null
		this.selectName = null
		this.ajaxData = []

		//引用 layui
		this.layui = layui;
		this.form =  layui.form;
		this.table = layui.table;

		// 提交
		this.form.on('submit(formDemo)', function (data) {

			var reimDto = {};
			reimDto = data.field;
			var formlist = $('form').serializeArray();

			$.each(formlist, function () {
				reimDto[this.name] = this.value;
			});

			for (var i = 0; i < that.options.data.length; i++) {
				delete(that.options.data[i].LAY_TABLE_INDEX)
				for(var item in that.options.data[i]){
					var listsi = "reimInfoDOList["+ i +"]."+ item
					reimDto[listsi] = that.options.data[i][item]

				}
			}
			$.ajax({
				cache : true,
				type : "POST",
				url : "/fin/reim/update",
				data : reimDto,// 你的formid
				async : false,
				error : function(request) {
					parent.layer.alert("Connection error");
				},
				success : function(data) {
					if (data.code == 0) {
						parent.layer.msg("操作成功");
						parent.reLoad();
						var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
						parent.layer.close(index);
					} else {
						parent.layer.alert(data.msg)
					}

				}
			});
			return false; //阻止表单跳转
		});

		this.initOption = function(ele,data){
			var options = ''
			data.forEach(function (item,index) {
				options += "<option value=\"" + item.id + "\">" + item.name +"</option>";
			})

			ele.append(options);
			this.form.render('select')

			return this

		};
		this.getData = function(index,url){
			var option = ''
			if(!this.ajaxData[index]){
				$.ajax({
					type:"get",
					url:that.url[index],
					success:sucBack,
					error:function(){
						console.log("请求失败")
					}
				})
				function sucBack(data){
					that.ajaxData[index] = data
					that.initOption($(that.eleSelect[index]),data).setSelectVal(that.selectName[index]).updateSelect(that.eleSelect[index],that.selectName[index]);
					if(index == 1 ){
						selectData = data
					}
				}
			}else{
				that.initOption($(that.eleSelect[index]),that.ajaxData[index]).setSelectVal(that.selectName[index]).updateSelect(that.eleSelect[index],that.selectName[index])
			}
		};
		this.renderSelect = function(params){
			if(!this.eleSelect  &&  !this.url && !this.selectName ){
				this.eleSelect= params.el
				this.url= params.url
				this.selectName= params.select
			}


			if(this.eleSelect&&!this.eleSelect.length){
				return
			}
			if(this.url&&!this.url.length){
				return
			}
			if(this.selectName&&!this.selectName.length){
				return
			}

			this.layui.use('form', function () {
				that.url.forEach(function(url,index){
					that.getData(index,url)
				})

			})
			return this

		};
		this.setSelectVal = function(ele){
			this.form.on('select('+ele+ ')', function(obj){
				var elem = obj.othis.parents('tr');
				var dataindex = elem.attr("data-index");
				$.each(that.options.data,function(index,value){
					if(value.LAY_TABLE_INDEX==dataindex){
						value[ele] = obj.value;
					}
				});

				//下拉框发送变化
				if (ele == "invoiceType") {
					$.each(selectData, function (index, value) {
						if (value.id == obj.value) {
							that.options.data[dataindex].taxRate = value.taxRate
						}
					})
					//that.options.data[dataindex].notTaxPrice = that.options.data[dataindex].reimPrice * that.options.data[dataindex].taxRate;
					// if(that.options.data[dataindex].reimPrice == ''||that.options.data[dataindex].reimPrice == undefined){
					// 	that.options.data[dataindex].notTaxPrice = 0
					// }else{
					// 	//that.options.data[dataindex].notTaxPrice = (that.options.data[dataindex].reimPrice - that.options.data[dataindex].reimPrice * that.options.data[dataindex].taxRate).toFixed(4);
					// 	that.options.data[dataindex].notTaxPrice = (that.options.data[dataindex].reimPrice /(1+that.options.data[dataindex].taxRate)*that.options.data[dataindex].taxRate).toFixed(2);
					// }
					that.table.render(that.options);
					that.renderSelect()
				}
			});

			return this
		};
		this.updateSelect = function(ele,name){

			$.each(this.options.data,function(index,value){
				console.log(this,value,name,'========>=====')
				$(ele).eq(index).val(value[name])
			});
			this.form.render('select')

			return this
		};
		this.initRowDouble = function(id){

			this.table.on("rowDouble("+id+")", function (obj) {

				var data1 = {};
				that.options.data.push(data1);
				that.table.render(that.options);
				that.renderSelect()

			});
			// 金额发送变化

			this.table.on("edit(" + id + ")", function (obj) {
				var editindex = $("tr").index(obj.tr);
				editindex = editindex - 1
				var newreimPrice = 0
                for(var i=0;i<that.options.data.length;i++){
                	console.log(that.options.data[i].reimPrice,i,"999")
					if(!that.options.data[i].reimPrice){
						newreimPrice += 0
					}else {
						newreimPrice += Number(that.options.data[i].reimPrice)
					}
				}

				$('#reimAmount').val(newreimPrice.toFixed(2))


				if (obj.field == "reimPrice") {

					// if (that.options.data[editindex].taxRate == ''|| that.options.data[editindex].taxRate == undefined ) {
					// 	that.options.data[editindex].notTaxPrice = that.options.data[editindex].reimPrice;
					// } else {
					// 	//that.options.data[editindex].notTaxPrice = (that.options.data[editindex].reimPrice - that.options.data[editindex].reimPrice *that.options.data[editindex].taxRate).toFixed(4);
					// 	that.options.data[dataindex].notTaxPrice = (that.options.data[dataindex].reimPrice /(1+that.options.data[dataindex].taxRate)*that.options.data[dataindex].taxRate).toFixed(2);
					// }

					that.table.render(that.options);
					that.renderSelect()
				}

			});

			return this
		};

		this.renderTable = function(name,open){

			this.layui.use('table', function (obj) {
				that.table.render(that.options);
				open = open || false
				if(open){
					that.initRowDouble(name)
				}
			});
			return this
		}

		this.tableData = function () {
			var data1 = msg;
			that.options.data = data1
			that.table.render(that.options);
		}

	}


	var paramsSelect = {
		url:[
			'/fin/pricetype/priceTypelist',
			'/fin/reimburseType/reimtypelist',
			'/itm/project/getNotEndProjectlist',
		],
		el:[".chosen-select-amountTypeid",".chosen-select-invoiceType",".chosen-select-projectId"],
		select:['amountTypeid','invoiceType','projectId']
	}
	var select = new tableSelect(layui,opentls).renderTable("test",true).renderSelect(paramsSelect).tableData();
	console.log(select,'select edit')
</script>
<style>
	.layui-table-cell {
		overflow: visible !important;
	}

	td .layui-form-select {
		margin-top: -10px;
		margin-left: -15px;
		margin-right: -15px;
	}

	.layui-table-body {
		height: 1000px;
	}

	dl.layui-anim.layui-anim-upbit {
		bottom: auto;
	}
</style>
</body>
</html>
